import { Badge } from 'antd-mobile'
import Link from 'next/link'
import React, { useEffect, useState } from 'react'
import { UserService } from '../../services'

import styles from './style.module.scss'

interface Props {
  active: number
}

const Nav = ({ active }: Props) => {

  const [cars, setCars] = useState(0)

  const className = (current: number) => {
    return active === current ? ' ' + styles.bule : ' '
  }

  useEffect(() => {
    async function getDate() {
      const res = await UserService.cars()
      if (res.stat === 'OK') setCars(parseInt(res.msg))
    }
    getDate()
  }, [])

  return (
    <ul className={styles.select}>
      <Link href={"/"} passHref>
        <li className={className(1)}>
          {active === 1 ?
            <i className='iconfont icon-zhuye-shixin'></i> :
            <i className='iconfont icon-zhuye1'></i>
          }
          <span>首页</span>
        </li>
      </Link>
      <Link href={"/sell"} passHref>
        <li className={className(2)}>
          {/* {active === 1 ?
            <i className="iconfont icon-tianjia3"></i> :
            <i className="iconfont icon-tianjia3"></i>
          } */}
          <i className="iconfont icon-tianjia3"></i>
          售书
        </li>
      </Link>
      <Badge color='#c75943' content={cars > 0 ? cars : null}
        style={{ '--right': '20%', '--top': '5%' }}
      >
        <Link href={"/cart"} passHref>
          <li className={className(3)}>
            <i className="iconfont icon-shouye"></i>
            购物车
          </li>
        </Link>
      </Badge>

      <Link href={"/user" + '/mine' + '/dynamic'} passHref>
        <li className={className(4)}>
          {active === 4 ?
            <i className={styles.yonghu + ' iconfont icon-yonghu-shixin'}></i> :
            <i className={styles.yonghu1 + " iconfont icon-geren"}></i>
          }
          用户
        </li>
      </Link>
    </ul>
  )
}

export default Nav
